  body{
    background: #fff
  }
  .demo-badge{
    margin-top: 15px
  }
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
  .demo-upload-list{
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    margin-right: 4px;
}
.demo-upload-list img{
    width: 100%;
    height: 100%;
}
.demo-upload-list-cover{
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.6);
}
.demo-upload-list:hover .demo-upload-list-cover{
    display: block;
}
.demo-upload-list-cover i{
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}

  .login-panel{
    width: 350px;
    border-radius: 3px;
    box-shadow: 0 0 10px 0 #e1e1e1;
    padding: 20px;
    margin: auto;
    margin-top: 150px;
    background: #ffffff
  }
  .over-box{
    width: 180px;
    height: 180px;
    border: #e1e1e1 1px solid;
    margin-top: 20px;
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center
  }
  .search-bar{
    margin-top: 15px;
    background: #f3f3f3;
    padding: 15px;
    padding-top:5px; 
    margin-bottom: 15px
  }
  .search-bar > .il{
      margin-top: 10px
  }
  .search-bar > .in{
      width: 160px;
      border-radius: 0
  }
  .ob span:first-child{
    font-size: 16px
  }
  .ob span:last-child{
      font-size: 20px;
      font-weight: bold
  }
  /* position */
  .pst{
    position: relative
  }
  .pst2{
    position: absolute
  }
  .pst3{
    position: fixed
  }
  
  /* flex */
  .flexr-start{
    display: flex;
    justify-content: flex-start
  }
  .flexr-center{
    display: flex;
    justify-content: center
  }
  .flexr-between{
    display: flex;
    justify-content: space-between
  }
  .flexr-around{
    display: flex;
    justify-content: space-around
  }
  .flexr-end{
    display: flex;
    justify-content: flex-end
  }
  .flexc-start{
    display: flex;
    flex-direction: column;
    justify-content: flex-start
  }
  .flexc-center{
    display: flex;
    flex-direction: column;
    justify-content: center
  }
  .flexc-between{
    display: flex;
    flex-direction: column;
    justify-content: space-between
  }
  .flexc-around{
    display: flex;
    flex-direction: column;
    justify-content: space-around
  }
  .flexc-end{
    display: flex;
    flex-direction: column;
    justify-content: flex-end
  }
  .item-center{
    align-items: center
  }
  .item-end{
    align-items: flex-end
  }
  
  /* margin和padding */
  .margin-ershi{
    margin: 20px
  }
  .margin-sanshi{
    margin: 30px
  }
  .margin-top-wu{
    margin-top: 5px
  }
  .margin-top-shi{
    margin-top: 10px
  }
  .margin-top-ershi{
    margin-top: 20px
  }
  .margin-top-sanshi{
    margin-top: 30px
  }
  .margin-top-sishi{
    margin-top: 40px
  }
  .margin-top-wushi{
    margin-top: 50px
  }
  .margin-top-liushi{
    margin-top: 60px
  }
  .margin-right-wu{
    margin-right: 5px
  }
  .margin-right-shi{
    margin-right: 10px
  }
  .margin-right-ershi{
    margin-right: 20px
  }
  .margin-right-sanshi{
    margin-right: 30px
  }
  .margin-right-sishi{
    margin-right: 40px
  }
  .margin-right-wushi{
    margin-right: 50px
  }
  .margin-right-liushi{
    margin-right: 60px
  }
  .margin-bottom-wu{
    margin-bottom: 5px
  }
  .margin-bottom-shi{
    margin-bottom: 10px
  }
  .margin-bottom-ershi{
    margin-bottom: 20px
  }
  .margin-bottom-sanshi{
    margin-bottom: 30px
  }
  .margin-bottom-sishi{
    margin-bottom: 40px
  }
  .margin-bottom-wushi{
    margin-bottom: 50px
  }
  .margin-bottom-liushi{
    margin-bottom: 60px
  }
  .margin-left-wu{
    margin-left: 5px
  }
  .margin-left-shi{
    margin-left: 10px
  }
  .margin-left-ershi{
    margin-left: 20px
  }
  .margin-left-sanshi{
    margin-left: 30px
  }
  .margin-left-sishi{
    margin-left: 40px
  }
  .margin-left-wushi{
    margin-left: 50px
  }
  .margin-left-liushi{
    margin-left: 60px
  }
  .padding-shi{
    padding: 10px
  }
  .padding-ershi{
    padding: 20px
  }
  .padding-sanshi{
    padding: 30px
  }
  .padding-top-wu{
    padding-top: 5px
  }
  .padding-top-shi{
    padding-top: 10px
  }
  .padding-top-ershi{
    padding-top: 20px
  }
  .padding-top-sanshi{
    padding-top: 30px
  }
  .padding-top-sishi{
    padding-top: 40px
  }
  .padding-top-wushi{
    padding-top: 50px
  }
  .padding-top-liushi{
    padding-top: 60px
  }
  .padding-right-wu{
    padding-right: 5px
  }
  .padding-right-shi{
    padding-right: 10px
  }
  .padding-right-ershi{
    padding-right: 20px
  }
  .padding-right-sanshi{
    padding-right: 30px
  }
  .padding-right-sishi{
    padding-right: 40px
  }
  .padding-right-wushi{
    padding-right: 50px
  }
  .padding-right-liushi{
    padding-right: 60px
  }
  .padding-bottom-wu{
    padding-bottom: 5px
  }
  .padding-bottom-shi{
    padding-bottom: 10px
  }
  .padding-bottom-ershi{
    padding-bottom: 20px
  }
  .padding-bottom-sanshi{
    padding-bottom: 30px
  }
  .padding-bottom-sishi{
    padding-bottom: 40px
  }
  .padding-bottom-wushi{
    padding-bottom: 50px
  }
  .padding-bottom-liushi{
    padding-bottom: 60px
  }
  .padding-left-wu{
    padding-left: 5px
  }
  .padding-left-shi{
    padding-left: 10px
  }
  .padding-left-ershi{
    padding-left: 20px
  }
  .padding-left-sanshi{
    padding-left: 30px
  }
  .padding-left-sishi{
    padding-left: 40px
  }
  .padding-left-wushi{
    padding-left: 50px
  }
  .padding-left-liushi{
    padding-left: 60px
  }

   /*  背景 */
  .bg-white{
    background: #fff;
  }

  /* 阴影 */
  .shadow{
    box-shadow: 0 5px 7px #e1e1e1;
  }
  .shadow2{
    box-shadow: 0 10px 10px #e1e1e1;
  }
  
  /* 粗体 */
  .bold{
    font-weight: bold
  }
  /* 截断段落 */
.elip{
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
  /* 间距 */
  .line-sishi{
    line-height: 40px
  }
  .line-wushi{
    line-height: 50px
  }
  .space-san{
    letter-spacing: 3px
  }
  .space-wu{
    letter-spacing: 5px
  }
  
  /* text */
  .text-left{
    text-align: left
  }
  .text-center{
    text-align: center
  }
  .text-right{
    text-align: right
  }

  /* border */
  .border{
    border: 1px solid #e1e1e1;
  }
  .border-top{
    border-top: 1px solid #e1e1e1;
  }
  .border-bottom{
    border-bottom: 1px solid #e1e1e1;
  }
  .border-left{
    border-left: 1px solid #e1e1e1;
  }
  .border-right{
    border-right: 1px solid #e1e1e1;
  }